<template>
    <div class="radioBox flex">
        <span class="radioName">{{ data.name }}</span>
        <div @click="handleClick" v-bind:class="{'selected':data.selected}"></div>
        <span class="radioInfo">{{ data.info }}</span>
    </div>
</template>

<script setup>
    defineProps(['data'])
    const emit = defineEmits(['radioChange'])
    const handleClick = () => {
        emit('radioChange')
    }
</script>

<style scoped>
    .radioBox{
        margin-top: 1.5vh;
        font-size: 12px;
        padding-left: 1vw;
        line-height: 14px;
    }

    .radioBox>.radioName{
        width: 11vw;
    }
    
    .radioBox>div{
        width: 12px;
        height: 12px;
        border: 2px solid #ccc;
        border-radius: 2px;
        margin-right: 2vw;
    }

    .radioBox>.radioInfo{
        color: #999;
    }

    .selected{
        background-color: #f80000;
    }
</style>